<template>
	<view class="profile-container" v-if="userInfo">
		<!-- 顶部信息区 -->
		<view class="background" style="overflow: hidden; display: flex;align-items: center;justify-content: center;">
			<image style="width: 100%;height: 100%;" :src="userInfo.backgroundUrl" mode="aspectFill"></image>
		</view>
		<!-- <view class="background-image"  :style=" 'background-image: url('+userInfo.backgroundUrl+');' "> -->
			<view class="profile-header top" style=" padding: 0 20px;">
				<!-- 头像区 -->
				<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>

				<!-- 右侧信息 -->
				<view class="info-section">
					<view class="top-line">
						<text class="nickname">{{ userInfo.nickName }}</text>
					</view>

					<text class="xhs-id">账号：{{userInfo.userName}}</text>
					<text class="ip-location">IP属地：未知</text>

				</view>
			</view> 
			
			<view class="profile-header" style="flex-direction: column;">
				<text class="bio-link">{{ userInfo.bio ? userInfo.bio : '这个人很懒，什么都没写' }}</text>

				<!-- 数据统计 -->
				<view class="stats">
					<view class="stat-item">
						<text class="number">{{userInfo.upCount}}</text>
						<text>获赞</text>
					</view>
					<view class="stat-item">
						<text class="number">{{userInfo.starCount}}</text>
						<text>被收藏</text>
					</view>
					<view class="stat-item">
						<text class="number" v-if="notes">{{notes.length}}</text>
						<text>发布帖子量</text>
					</view>
					<view class="stat-item" @click="goToPage('/pages/person/settings/settings')"
						style="position: absolute; right: 0vw; background-color: #eee; padding: 5px 12px; border-radius: 15px;">
						<uni-icons type="gear" size="24" color="#333"></uni-icons>
					</view>
				</view>
			</view>
		<!-- </view> -->


		<!-- 功能导航 -->
		<scroll-view class="nav-tabs" scroll-x>
			<text class="tab-item" :class="{active: activeTab === 'notes'}" @click="handleTabClick('notes')">笔记</text>
			<text class="tab-item" :class="{active: activeTab === 'collections'}"
				@click="handleTabClick('collections')">收藏</text>
			<text class="tab-item" :class="{active: activeTab === 'liked'}" @click="handleTabClick('liked')">赞过</text>
		</scroll-view>

		<!-- 内容展示区 -->
		<view class="content-grid">
			<!-- 笔记项 -->
			<view class="note-item" v-if="notes && activeTab === 'notes' " v-for="(item, index) in notes" :key="index"
				@click="goToPage(`/pages/post/post-1/post-1?postId=${encodeURIComponent(item.postId)}`)">
				<image class="note-image" :src="item.image">
					<text class="collect-count">{{item.tag}}</text>
				</image>
				<text class="note-title">{{item.title}}</text>
				<view class="note-footer">
					<text class="like-count">{{item.likeCount}}</text>
					<text class="author">{{item.nickName}}</text>
				</view>
			</view>
			<view class="note-item" v-if="collections && activeTab === 'collections' " v-for="(item, index) in collections"
				:key="index" @click="goToPage(`/pages/post/post-1/post-1?postId=${encodeURIComponent(item.postId)}`)">
				<image class="note-image" :src="item.image">
					<text class="collect-count">{{item.tag}}</text>
				</image>
				<text class="note-title">{{item.title}}</text>
				<view class="note-footer">
					<text class="like-count">{{item.likeCount}}</text>
					<text class="author">{{item.nickName}}</text>
				</view>
			</view>
			<view class="note-item" v-if="liked && activeTab === 'liked' " v-for="(item, index) in liked" :key="index"
				@click="goToPage(`/pages/post/post-1/post-1?postId=${encodeURIComponent(item.postId)}`)">
				<image class="note-image" :src="item.image">
					<text class="collect-count">{{item.tag}}</text>
				</image>
				<text class="note-title">{{item.title}}</text>
				<view class="note-footer">
					<text class="like-count">{{item.likeCount}}</text>
					<text class="author">{{item.nickName}}</text>
				</view>
			</view>
		</view>
	</view>

	<view class="profile-container" v-else>
		<!-- 顶部信息区 -->
		<view class="profile-header" style="padding-bottom: 0;">
			<!-- 头像区 -->
			<image class="avatar" src="/static/sample2.jpg"></image>

			<!-- 右侧信息 -->
			<view class="info-section" style="display: flex;align-items: center;">
				<view class="top-line">
					<text class="nickname">游客</text>
				</view>

			</view>
		</view>

		<view class="profile-header" style="flex-direction: column;">
			<text class="bio-link">这个人很懒，什么都没写</text>

			<!-- 数据统计 -->
			<view class="stats">
				<view class="stat-item">
					<text class="number">0</text>
					<text>获赞</text>
				</view>
				<view class="stat-item">
					<text class="number">0</text>
					<text>被收藏</text>
				</view>
				<view class="stat-item">
					<text class="number">0</text>
					<text>发布帖子量</text>
				</view>
				<view class="stat-item" @click="goToPage('/pages/person/settings/settings')" style="float: right;">
					<uni-icons type="gear" size="24" color="#333"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 功能导航 -->
		<scroll-view class="nav-tabs" scroll-x>
			<text class="tab-item" :class="{active: activeTab === 'notes'}" @click="handleTabClick('notes')">笔记</text>
			<text class="tab-item" :class="{active: activeTab === 'collections'}"
				@click="handleTabClick('collections')">收藏</text>
			<text class="tab-item" :class="{active: activeTab === 'liked'}" @click="handleTabClick('liked')">赞过</text>
		</scroll-view>

		<view class="login-prompt">
			<text class="prompt-text">你还没有登录</text>
			<view class="prompt-text">
				<view class="login-btn" @click="goToPage('/pages/starter/login/login')">登录</view>
				<text>来查看更多内容</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		http
	} from '../../../utils/request'

	const activeTab = ref('notes')
	const login = ref(false)
	const userInfo = ref(null)
	const notes = ref(null)
	const collections = ref(null)
	const liked = ref(null)
	const ok_to_progress = ref(false)

	const handleTabClick = async (tab) => {
		activeTab.value = tab
		const userId = uni.getStorageSync('userId');
		if (tab === 'liked') {
			try {
				const data = await http.get('/users/like_posts', {
					userId
				});
				liked.value = data.data.reverse()
				console.log(notes.value);
			} catch (e) {
				console.error('获取用户喜欢的帖子失败:', e);
			}
		} else if (tab === 'collections') {
			try {
				const data = await http.get('/users/collect_posts', {
					userId
				});
				collections.value = data.data.reverse()
				console.log(collections.value);
			} catch (e) {
				console.error('获取用户收藏的帖子失败:', e);
			}
		} else if (tab === 'notes') {
			try {
				const data = await http.get('/users/publish_posts', {
					userId
				});
				notes.value = data.data.reverse()
				console.log(notes.value);
			} catch (e) {
				console.error('获取用户发布的帖子失败:', e);
			}
		}
	}
	onShow(async () => {
		login.value = uni.getStorageSync('loggedIn') ? true : false;
		if (login.value) {
			const userId = uni.getStorageSync('userId');
			console.log("获取userId成功");
			if (userId) {
				try {
					const res = await http.get('/users/info', {
						userId
					});
					userInfo.value = res;
					console.log('用户信息:', userInfo.value);
					setTimeout(async ()=>{
						// 默认显示发布过的
						handleTabClick(activeTab.value)
					},1000)
					

				} catch (e) {
					console.error('获取用户信息失败:', e);
				}
				// try{
				// 	handleTabClick('notes')
				// }catch(e){
				// 	console.error('获取初始-发布笔记失败:', e);
				// }
			}
		}
	})
	
	const goToPage = (url) => {
		if (!url) return
		uni.navigateTo({
			url
		});
	}
</script>

<style>
	.profile-container {
		background: #f5f5f5;
		min-height: 100vh;
	}
	
	.background{
		width: 100%;
		height: 240px;
	}
	
	/* 顶部信息区 */
	.profile-header {
		padding: 20px;
		display: flex;
		background-color: #fff;
	}
	.top:before{
		content: '';
		width: 100%;
		height: 20px;
		top: 221px;
		left: 0;
		position: absolute;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20px 20px 0 0;
		
	}
	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 40px;
		margin-right: 15px;
	}

	.top-line {
		display: flex;
		align-items: center;
		margin-bottom: 6px;
	}

	.nickname {
		font-size: 18px;
		font-weight: bold;
		margin-right: 8px;
	}

	.age {
		color: #666;
		margin-right: 15px;
	}

	.edit-btn {
		padding: 4px 12px;
		border: 1px solid #ddd;
		border-radius: 15px;
		font-size: 12px;
	}

	.xhs-id {
		color: #666;
		display: block;
		margin: 6px 0;
	}

	.ip-location {
		color: #999;
		font-size: 12px;
	}

	.bio-link {
		color: #4a4a4a;
		display: block;
		margin: 0px 0 15px 0;

	}

	/* 数据统计 */
	.stats {
		display: flex;
	}

	.stat-item {
		margin-right: 25px;
		text-align: center;
	}

	.number {
		font-size: 16px;
		font-weight: bold;
		display: block;
	}

	/* 导航选项卡 */
	.nav-tabs {
		background: #fff;
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		display: inline-block;
		margin: 0 20px;
		padding: 8px 0;
	}

	.tab-item.active {
		font-weight: bold;
		border-bottom: 2px solid #FF2442;
	}

	/* 内容网格 */
	.content-grid {
		padding: 10px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.note-item {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
	}

	.note-image {
		width: 100%;
		height: 180px;
		position: relative;
	}

	.collect-count {
		position: absolute;
		right: 8px;
		top: 8px;
		color: #fff;
		font-size: 12px;
		background: rgba(0, 0, 0, 0.4);
		padding: 2px 6px;
		border-radius: 10px;
	}

	.note-title {
		display: block;
		padding: 8px;
		font-size: 14px;
		line-height: 1.4;
	}

	.note-footer {
		display: flex;
		justify-content: space-between;
		padding: 0 8px 8px;
		color: #666;
		font-size: 12px;
	}

	.like-count::before {
		content: "♥ ";
		color: #FF2442;
	}

	.login-prompt {
		padding: 20px;
		text-align: center;
		margin-top: 20px;
	}

	.prompt-text {
		display: block;
		margin-bottom: 15px;
		color: #666;
	}

	.login-btn {
		display: inline-block;
		color: #FF2442 !important;
		border: 1px solid #FF2442 !important;
		border-radius: 15px !important;
		padding: 2px 12px !important;
		margin: 0 8px !important;
		background: transparent !important;
		line-height: 1.5 !important;
	}
</style>
